<template>
    <div class='component-upload'>
        <div class="component-upload__content">
            <slot></slot>
        </div>
        <input class="component-upload__input" type="file" accept="image/*" capture="camera" @change='upload'>
        <!-- <div v-else class="component-upload__input" @click='uploadWehcat'></div> -->
    </div>
</template>

<script>

    import { getBrowser } from '../utils/utils'
    import wx from 'weixin-js-sdk'
    import MegaPixImage from '../libs/megapix/megapix-image'

    export default {
        props:{
            type:'',
        },
        data() {
            return {
                fileData:'',
                fileLoading:false,
                localIds:'',
                inWechat:getBrowser() == 'WeChat'
            }
        },
        methods:{
            upload(e){

                this.fileLoading = true

                let result
                let files = e.target.files;
                let file = files[0];
                let type = file && file.name.substring(file.name.lastIndexOf(".")+1).toLowerCase();

                // if (type!='xlsx') {
                //     this.setMsgTip('文件格式必须为*.xlsx')
                //     this.fileLoading = false
                //     return
                // }

                let $img = document.createElement('img');
                let mpImg = new MegaPixImage(file);
                mpImg.render($img, { maxWidth: 1000, maxHeight: 1000, quality: 0.5}, ()=> {
                    //1.获取压缩完成后的base64
                    let imgSrc = $img.src;

                    this.fileData = imgSrc
                    this.done()
                    e.target.value = ''
                });

                // let reader = new FileReader();
                // reader.onload = () => {
                //     result = reader.result
                //     this.fileData = result
                //     this.done()
                //     e.target.value = ''
                // }
                // reader.onloadend = () => {
                //     this.fileLoading = false
                // }
                // reader.readAsDataURL(file);
            },
            uploadWehcat(){
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
                    success: (res) => {
                       // wx.uploadImage({
                       //      localId: res.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                       //      isShowProgressTips: 1, // 默认为1，显示进度提示
                       //      success: (res) => {
                       //          console.log(res.serverId) // 返回图片的服务器端ID
                       //      }
                       //  });
                        wx.getLocalImgData({
                            localId: res.localIds[0], // 图片的localID
                            success: (res) => {
                                this.fileData = res.localData
                                this.done()
                            }

                        });
                    }
                });
            },
            done(){
                this.$emit('done',this.fileData, this.type)
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    
    .component-upload{
        position: relative;
    }
    .component-upload__content{
        position: relative;
    }
    .component-upload__input{
        position: absolute;
        z-index:2;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        opacity:0;
        cursor: pointer;
    }
</style>


